import React, { PureComponent, Fragment } from 'react';
import { connect } from 'dva';
import moment from 'moment';
import {
  DownOutlined,
  UpOutlined,
  QuestionCircleOutlined,
  DownloadOutlined,
} from '@ant-design/icons';
import {
  Row,
  Col,
  Card,
  Input,
  Button,
  Dropdown,
  Menu,
  Modal,
  message,
  Divider,
  Tabs,
  DatePicker,
  Tooltip,
  Select,
  Popover,
  Form,
} from 'antd';
import Link from 'umi/link';
import router from 'umi/router';
import queryString from 'query-string';
import StandardTable from '@/components/StandardTable';
import PageHeaderWrapper from '@/components/PageHeaderWrapper';
import Authorized from '@/utils/Authorized';
import downloadFile, { getProPagination } from '@/utils/utils';
import styles from '@/utils/utils.less';
import { checkPermissions } from '@/utils/authority';
import ProTable from '@/pages/components/Problem/ProblemPage/ProTable';
import ProModal from '@/pages/components/Problem/ProblemPage/ProModal';
import ProExportBtn from '@/pages/components/Problem/ProblemPage/ProExportBtn';
import Area from '../../components/Area';
import SearchAccoListOs from '../../components/SearchAccoListOs';
import ServiceRemark from '../../components/ServiceRemark';
import proIcon from '../../../assets/proIcon.png';
import Customer from '../../components/Customer';
import SearchPersonEs from '../../components/SearchPersonEs';
import DeclareModal from '../../components/DeclareModal';
import BatchTaskProgress from '../../components/BatchTaskProgress';

const FormItem = Form.Item;
const { TabPane } = Tabs;
const { RangePicker } = DatePicker;
const { Option } = Select;
@connect(
  ({
    accuadjust: {
      data,
      proListData,
      accuType,
      detailHdl,
      activeKey,
      formFieldsValue,
      tabList,
      expandForm,
      proFormFieldsValue,
    },
    login,
    loading,
    publicdata,
    adjustaccubatch,
  }) => ({
    login,
    data,
    proListData,
    activeKey,
    formFieldsValue,
    tabList,
    expandForm,
    accuType,
    detailHdl,
    loading: loading.models.accuadjust,
    publicdata,
    proFormFieldsValue,
    adjustaccubatch,
  })
)
class TableList extends PureComponent {
  formRef = React.createRef();

  constructor(props) {
    super(props);
    this.state = {
      proVisible: false,
      selectedRows: [],
      selectedRowKeys: [],
      visHdlRemark: false,
      accoOwnerFlag: false,
      decExcelVisible: false,
      declareData: {},
    };
    this.tableSearchLayout = {
      labelCol: { md: { span: 7 } },
      wrapperCol: { md: { span: 17 } },
    };
  }

  componentDidMount() {
    this.getDict();
    const {
      location,
      activeKey,
      dispatch,
      data: { pagination },
      login: { baseUser },
    } = this.props;
    const tempActiveKey = queryString.parse(location.search).activeKey || activeKey;
    dispatch({
      type: 'accuadjust/updateModelData',
      payload: {
        activeKey: tempActiveKey,
      },
    });
    const proPagination = getProPagination(tempActiveKey, '5', pagination);
    this.getList(tempActiveKey, proPagination.current, proPagination.pageSize);
    this.setState({ accoOwnerFlag: baseUser.postType === 2 });
  }

  componentWillUnmount() {
    const { dispatch } = this.props;
    dispatch({
      type: 'accuadjust/updateModelData',
      payload: {
        pageData: {
          list: [],
          pagination: {
            current: 1,
            pageSize: 10,
            total: 10,
          },
        },
      },
    });
  }

  getDict = () => {
    const { dispatch } = this.props;
    dispatch({
      type: 'accuadjust/fetchDicList',
      payload: ['ACCU_ADJ_TYPE'],
    });
  };

  onSelectChange = (selectedRowKeys, selectedRows) => {
    this.setState({
      selectedRowKeys,
      selectedRows,
    });
  };

  // 查询列表
  getList = async (activeKey = '1', currentPage = 1, pageSize = 10, queryParam) => {
    try {
      this.setState({
        selectedRowKeys: [],
        selectedRows: [],
      });
      const { dispatch } = this.props;
      let temp = await this.formRef.current.validateFields();
      temp = queryParam || temp;
      await dispatch({
        type: 'accuadjust/updateModelData',
        payload: { formFieldsValue: temp, activeKey },
      });
      const formFieldsValue = {};
      Object.keys(temp).forEach(key => {
        if (key === 'dateArr' && temp[key]) {
          formFieldsValue.startDateYm =
            (temp.dateArr && temp.dateArr[0] && temp.dateArr[0].format('YYYYMM')) || null;
          formFieldsValue.endDateYm =
            (temp.dateArr && temp.dateArr[1] && temp.dateArr[1].format('YYYYMM')) || null;
        } else if (key === 'operTime' && temp[key]) {
          formFieldsValue.operStartTime =
            temp.operTime && temp.operTime[0] && temp.operTime[0].valueOf();
          formFieldsValue.operEndTime =
            temp.operTime && temp.operTime[1] && temp.operTime[1].valueOf();
        } else if (temp[key] && temp[key].key) {
          formFieldsValue[key] =
            temp[key].key === undefined || temp[key].key === null ? null : temp[key].key;
        } else {
          formFieldsValue[key] =
            temp[key] === undefined || temp[key] === null ? null : temp[key].trim();
        }
        delete formFieldsValue.dateArr;
        delete formFieldsValue.operTime;
      });
      const pagerArg = { currentPage, pageSize };
      const values = {
        adjStep: activeKey,
        ...formFieldsValue,
        pagerArg,
      };
      if (Number(activeKey) === 5) {
        const params = {
          ...formFieldsValue,
          busiType: 4,
        };
        setTimeout(() => {
          const { proTable } = this.state;
          const proFormFieldsValue = { ...params };
          dispatch({
            type: 'accuadjust/updateModelData',
            payload: {
              proFormFieldsValue,
            },
          });
          if (proTable.searchList) {
            proTable.searchList(proFormFieldsValue, currentPage, pageSize);
          }
        });
      } else {
        dispatch({
          type: 'accuadjust/fetchList',
          payload: values,
        });
      }
    } catch (e) {
      console.error(e);
    }
  };

  // 重置
  resetSearch = async () => {
    const { dispatch } = this.props;
    await dispatch({
      type: 'accuadjust/updateModelData',
      payload: { formFieldsValue: {} },
    });
    this.formRef.current.resetFields();
    this.formRef.current.setFieldsValue({ operTime: null, dateArr: null });
  };

  // 表格有变化：比如：切换页码
  handleStandardTableChange = (pagination, filtersArg, sorter) => {
    const {
      dispatch,
      activeKey,
      formFieldsValue,
      login: { systemList },
    } = this.props;
    let userType;
    systemList.map(item => {
      if (item.isSelected) {
        userType = item.sysCode;
      }
      return item.isSelected;
    });
    const getValue = obj =>
      Object.keys(obj)
        .map(key => obj[key])
        .join(',');
    const filters = Object.keys(filtersArg).reduce((obj, key) => {
      const newObj = { ...obj };
      newObj[key] = getValue(filtersArg[key]);
      return newObj;
    }, {});
    const temp = formFieldsValue;
    const formFieldsValues = {};
    Object.keys(temp).forEach(key => {
      if (key === 'dateArr' && temp[key]) {
        formFieldsValues.startDateYm =
          (temp.dateArr && temp.dateArr[0] && temp.dateArr[0].format('YYYYMM')) || null;
        formFieldsValues.endDateYm =
          (temp.dateArr && temp.dateArr[1] && temp.dateArr[1].format('YYYYMM')) || null;
      } else if (key === 'operTime' && temp[key]) {
        formFieldsValues.operStartTime =
          temp.operTime && temp.operTime[0] && temp.operTime[0].valueOf();
        formFieldsValues.operEndTime =
          temp.operTime && temp.operTime[1] && temp.operTime[1].valueOf();
      } else {
        formFieldsValues[key] =
          temp[key] === undefined || temp[key] === null ? null : temp[key].trim();
      }
      delete formFieldsValues.dateArr;
      delete formFieldsValues.operTime;
    });
    const pagerArg = {
      currentPage: pagination.current,
      pageSize: pagination.pageSize,
    };
    const params = {
      adjStep: activeKey,
      ...formFieldsValues,
      ...filters,
      pagerArg,
    };
    if (sorter.field) {
      params.sorter = `${sorter.field}_${sorter.order}`;
    }
    if (Number(userType) === 4) {
      if (Number(activeKey) === 5) {
        dispatch({
          type: 'accuadjust/fetchProList',
          payload: {
            ...params,
            busiType: 3,
          },
        });
      } else {
        dispatch({
          type: 'accuadjust/fetchList',
          payload: params,
        });
      }
    }
  };

  // 切换表格展开收起
  toggleForm = () => {
    const { dispatch, expandForm } = this.props;
    dispatch({
      type: 'accuadjust/updateModelData',
      payload: { expandForm: !expandForm },
    });
  };

  // 点击复选框
  handleSelectRows = (rows, rowKeys) => {
    this.setState({ selectedRows: rows, selectedRowKeys: rowKeys });
  };

  changeTabPane = activeKey => {
    router.push({
      pathname: '/providentfundmanagement/accuadjust/index',
      query: {
        activeKey,
      },
    });
    this.setState({ selectedRows: [], selectedRowKeys: [] }, () => {
      this.getList(activeKey);
    });
  };

  // 批量修改
  batchModify = () => {
    router.push('/providentfundmanagement/accuadjust/batchModify');
  };

  // 线下申报
  offDeclare = () => {
    const { selectedRows } = this.state;
    const { activeKey } = this.props;
    const temp = this.formRef.current.validateFields();
    Object.keys(temp).forEach(key => {
      if (temp[key] === undefined) {
        temp[key] = null;
      } else if (key === 'dateArr') {
        temp.startDateYm =
          temp.dateArr && temp.dateArr[0] ? temp.dateArr[0].format('YYYYMM') : null;
        temp.endDateYm = temp.dateArr && temp.dateArr[1] ? temp.dateArr[1].format('YYYYMM') : null;
        delete temp[key];
      } else if (key === 'operTime') {
        temp.operStartTime = temp.operTime && temp.operTime[0] ? temp.operTime[0].valueOf() : null;
        temp.operEndTime = temp.operTime && temp.operTime[1] ? temp.operTime[1].valueOf() : null;
        delete temp[key];
      }
    });
    if (selectedRows.length) {
      const arr = [];
      selectedRows.map(item => {
        arr.push({ execAdjId: item.execAdjId, vno: item.vno });
        return arr;
      });
      const values = {
        accuEntryAdjList: arr,
        entryAdjQueryDto: { ...temp, adjStep: activeKey },
      };

      Modal.confirm({
        title: (
          <div>
            是否对当前列表<span className="emphasize-text">{selectedRows.length}</span>
            条数据进行线下申报？
          </div>
        ),
        icon: <QuestionCircleOutlined />,
        okText: '是',
        cancelText: '否',
        onOk: () => {
          this.offDeclarePort(values);
        },
      });
    } else {
      const values = {
        accuEntryAdjList: [],
        entryAdjQueryDto: { ...temp, adjStep: activeKey },
      };
      Modal.confirm({
        title: `是否对当前列表全部数据进行申报？`,
        okText: '确认',
        cancelText: '取消',
        icon: <QuestionCircleOutlined />,
        onOk: () => {
          this.offDeclarePort(values);
        },
      });
    }
  };

  // 线下申报
  offDeclarePort = async values => {
    try {
      const { dispatch, activeKey } = this.props;
      const res = await dispatch({
        type: 'accuadjust/accuOffDeclare',
        payload: values,
      });
      if (res.success) {
        if (res.data) {
          // 渲染Alert提示信息
          this.renderAlertInfo(res.data);
        } else {
          this.getList(activeKey);
        }
      }
    } catch (e) {
      console.error(e);
    }
  };

  // 渲染Alert提示信息
  renderAlertInfo = obj => {
    Modal.warning({
      title: (
        <p>
          成功<span style={{ color: '#faad14' }}>{obj.succCount}</span>
          条，失败
          <span style={{ color: '#faad14' }}>{obj.errCount}</span>条
        </p>
      ),
      content:
        (obj.errMsgs && obj.errMsgs.length && (
          <div>
            <h4>失败原因：</h4>
            {obj.errMsgs.map((item, index) => (
              <p>{`${index + 1}.${item}`}</p>
            ))}
          </div>
        )) ||
        null,
      okText: '确定',
      onOk: async () => {
        try {
          const { activeKey } = this.props;
          this.getList(activeKey);
        } catch (e) {
          console.error(e);
        }
      },
    });
  };

  // 申报成功
  declareSuccess = () => {
    const { selectedRows } = this.state;
    if (selectedRows.length) {
      const arr = [];
      selectedRows.map(item => {
        arr.push({ execAdjId: item.execAdjId, vno: item.vno });
        return arr;
      });
      const values = { accuEntryAdjList: arr };
      Modal.confirm({
        title: (
          <div>
            是否对当前列表<span className="emphasize-text">{selectedRows.length}</span>
            条数据标记申报成功？
          </div>
        ),
        icon: <QuestionCircleOutlined />,
        okText: '是',
        cancelText: '否',
        onOk: () => {
          this.declareSuccessPort(values);
        },
      });
    } else {
      message.warning('至少选择一条数据');
    }
  };

  // 标记申报成功
  declareSuccessPort = async values => {
    try {
      const { dispatch, activeKey } = this.props;
      const res = await dispatch({
        type: 'accuadjust/accuSuccessDeclare',
        payload: values,
      });
      if (res.success) {
        if (res.data) {
          // 渲染Alert提示信息
          this.renderAlertInfo(res.data);
        } else {
          this.getList(activeKey);
        }
      }
    } catch (e) {
      console.error(e);
    }
  };

  // 进度弹框显隐
  handleProgressModalVisible = flag => {
    const { activeKey, dispatch } = this.props;
    if (!flag) {
      dispatch({
        type: 'adjustaccubatch/updateModelData',
        payload: {
          showProgress: false,
        },
      });
      this.getList(activeKey);
    }
  };

  // 取消申报
  declareCancel = () => {
    const { selectedRows } = this.state;
    if (selectedRows.length) {
      const arr = [];
      selectedRows.map(item => {
        arr.push({ execAdjId: item.execAdjId, vno: item.vno });
        return arr;
      });
      const values = { accuEntryAdjList: arr };
      Modal.confirm({
        title: (
          <div>
            是否对当前列表<span className="emphasize-text">{selectedRows.length}</span>
            条数据进行取消申报？
          </div>
        ),
        icon: <QuestionCircleOutlined />,
        okText: '是',
        cancelText: '否',
        onOk: () => {
          this.declareCancelPort(values);
        },
      });
    } else {
      message.warning('至少选择一条数据');
    }
  };

  // 取消申报
  declareCancelPort = async values => {
    try {
      const { dispatch, activeKey } = this.props;
      const res = await dispatch({
        type: 'accuadjust/accuCancelDeclare',
        payload: values,
      });
      if (res.success) {
        if (res.data) {
          // 渲染Alert提示信息
          this.renderAlertInfo(res.data);
        } else {
          this.getList(activeKey);
        }
      }
    } catch(e) {
      console.error(e)
    }
  };

  onDeclareCancel = () => {
    this.setState({
      decExcelVisible: false,
    });
  };

  hdlRemark = (execAdjId, sendId, adjId, accuEmpOrdId) => {
    const { dispatch } = this.props;
    this.setState({
      busiId: execAdjId,
      sendId,
      taskId: adjId,
    });
    this.handleModalVisible(true);
    dispatch({
      type: 'accuadjust/detailHdlRemark',
      payload: { sendId, busiId: accuEmpOrdId },
    });
  };

  // 模态框显隐
  handleModalVisible = flag => {
    this.setState({
      visHdlRemark: !!flag,
    });
  };

  // 提交数据
  submitData = values => {
    const { dispatch, activeKey } = this.props;
    const { sendId, busiId, taskId } = this.state;
    dispatch({
      type: 'accuadjust/remarkOk',
      payload: { ...values, busiId, sendId, taskId },
    }).then(response => {
      if (response.success) {
        this.getList(activeKey);

        message.success('办理备注成功！');
        this.handleModalVisible();
      }
    });
  };

  showModal = flag => {
    const { selectedRows } = this.state;
    if (selectedRows.length) {
      const tempArr = selectedRows.filter(item => String(item.probFlag) === '1');
      if (tempArr.length) {
        message.error('问题人员无法做相关操作');
        return;
      }
      this.setState({
        proVisible: flag,
      });
    } else {
      message.warning('请至少选择一项');
    }
  };

  toggleProModal = flag => {
    this.setState({
      proVisible: flag,
    });
  };

  proHandleOk = () => {
    const { activeKey } = this.props;
    this.toggleProModal(false);
    this.getList(activeKey);
  };

  onTimeChanges = value => {
    this.formRef.current.setFieldsValue({
      dateArr: value,
    });
  };

  downExcel = () => {
    const { data, proListData, activeKey } = this.props;
    const proTotal = proListData.pagination.total;
    const { selectedRowKeys } = this.state;
    const {
      pagination: { total },
    } = data;
    const temp = this.formRef.current.validateFields();
    Object.keys(temp).forEach(key => {
      if (temp[key] === undefined) {
        temp[key] = null;
      } else if (key === 'dateArr') {
        temp.startDateYm = (temp.dateArr && temp.dateArr[0].format('YYYYMM')) || null;
        temp.endDateYm = (temp.dateArr && temp.dateArr[1].format('YYYYMM')) || null;
        delete temp[key];
      } else if (key === 'operTime') {
        temp.operStartTime = temp.operTime[0].valueOf();
        temp.operEndTime = temp.operTime[1].valueOf();
        delete temp[key];
      }
    });
    temp.adjStep = Number(activeKey) === 5 ? undefined : activeKey;
    if (Number(activeKey) === 5) {
      if (proTotal === 0) {
        message.warning('无查询结果，不可导出');
      } else {
        downloadFile({ ...temp, busiType: 4 }, '/osApi/problem/accu/export', 'POST');
      }
    } else if (total === 0) {
      message.warning('无查询结果，不可导出');
    } else if (Number(activeKey) === 1 || Number(activeKey) === 2 || Number(activeKey) === 3) {
      downloadFile(
        { ...temp, execAdjIds: selectedRowKeys },
        '/osApi/accuEntryAdj/expAccuEntAdj',
        'POST'
      );
    } else {
      downloadFile(
        { ...temp, execAdjIds: selectedRowKeys },
        '/osApi/accuEntryAdj/exportAccuAdj',
        'POST'
      );
    }
  };

  // 导出
  exportData = () => {
    const { selectedRowKeys } = this.state;
    if (selectedRowKeys.length) {
      this.downExcel();
    } else {
      Modal.confirm({
        title: `如果不选择数据，则默认导出当前列表下所有数据`,
        icon: <QuestionCircleOutlined />,
        okText: '确认',
        cancelText: '取消',
        onOk: () => {
          this.downExcel();
        },
      });
    }
  };

  // 导出
  outExcel = () => {
    const { selectedRowKeys } = this.state;
    if (selectedRowKeys.length) {
      this.downExcel();
    } else {
      Modal.confirm({
        title: `如果不选择数据，则默认导出当前列表下所有数据`,
        icon: <QuestionCircleOutlined />,
        okText: '确认',
        cancelText: '取消',
        onOk: () => {
          this.downExcel();
        },
      });
    }
  };

  exportProExcel = () => {
    const { formFieldsValue } = this.props;
    const { selectedRowKeys } = this.state;
    const obj = {
      ...formFieldsValue,
      busiType: 4,
      detIds: selectedRowKeys,
    };
    if (selectedRowKeys.length) {
      downloadFile(obj, '/osApi/problem/accu/export', 'POST', () => {});
    } else {
      Modal.confirm({
        title: '请选择数据，如不选择，默认导出当前条件下所有数据！',
        icon: <QuestionCircleOutlined />,
        okText: '导出',
        cancelText: '取消',
        onOk: () => {
          downloadFile(obj, '/osApi/problem/accu/export', 'POST');
        },
      });
    }
  };

  hdlExport = () => {
    router.push('/providentfundmanagement/accuadjust/batch');
  };

  batchFeedback = () => {
    router.push('/providentfundmanagement/accuadjust/batchFeedback?busiType=4');
  };

  // 重置查询条件并获取列表
  async resetAndGeLlist(location) {
    const { dispatch } = this.props;
    const { queryParam } = location;
    dispatch({
      type: 'accuadjust/updateModelData',
      payload: {
        expandForm: Boolean(queryParam),
      },
    });
    await this.resetSearch();
    await this.getList(location.query.activeKey, undefined, undefined, queryParam);
    dispatch({
      type: 'global/changeIsMenuLink',
      payload: location,
    });
  }

  renderSimpleForm() {
    const { formFieldsValue, activeKey } = this.props;
    return (
      <Form layout="inline" ref={this.formRef} initialValues={formFieldsValue}>
        <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
          <Col md={8} sm={24}>
            <FormItem label="客户名称" name="custId" {...this.tableSearchLayout}>
              <Customer attr allowClear showSearch optionFilterProp="children" />
            </FormItem>
          </Col>
          <Col md={8} sm={24}>
            <FormItem label="执行地" name="areaId" {...this.tableSearchLayout}>
              <Area allowClear showSearch optionFilterProp="children" labelInValue />
            </FormItem>
          </Col>
          <Col md={8} sm={24}>
            <span className={styles.submitButtons}>
              <Button type="primary" onClick={() => this.getList(activeKey)}>
                查询
              </Button>
              <Button style={{ marginLeft: 8 }} onClick={this.resetSearch}>
                重置
              </Button>
              <a style={{ marginLeft: 8 }} onClick={this.toggleForm}>
                展开 <DownOutlined />
              </a>
            </span>
          </Col>
        </Row>
      </Form>
    );
  }

  renderAdvancedForm() {
    const { activeKey, formFieldsValue, accuType } = this.props;
    const { accoOwnerFlag } = this.state;
    return (
      <Form layout="inline" ref={this.formRef} initialValues={formFieldsValue}>
        <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
          <Col md={8} sm={24}>
            <FormItem label="客户名称" name="custId" {...this.tableSearchLayout}>
              <Customer attr allowClear showSearch optionFilterProp="children" />
            </FormItem>
          </Col>
          <Col md={8} sm={24}>
            <FormItem label="执行地" name="areaId" {...this.tableSearchLayout}>
              <Area allowClear showSearch optionFilterProp="children" labelInValue />
            </FormItem>
          </Col>
          <Col md={8} sm={24}>
            <FormItem {...this.tableSearchLayout} label="所属客服" name="creId">
              <SearchPersonEs
                allowClear
                showSearch
                filterOption={(input, option) =>
                  option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
                }
              />
            </FormItem>
          </Col>
        </Row>
        <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
          <Col md={8} sm={24}>
            <FormItem label="调整类型" name="adjType" {...this.tableSearchLayout}>
              <Select
                placeholder="请选择"
                style={{ width: '100%' }}
                allowClear
                showSearch
                optionFilterProp="children"
              >
                {accuType.map(item => (
                  <Option key={item.itemCode}>{item.itemName}</Option>
                ))}
              </Select>
            </FormItem>
          </Col>
          <Col md={8} sm={24}>
            <FormItem label="姓名" name="empName" {...this.tableSearchLayout}>
              <Input placeholder="请输入姓名" maxLength={15} />
            </FormItem>
          </Col>
          <Col md={8} sm={24}>
            <FormItem label="证件号" name="certNo" {...this.tableSearchLayout}>
              <Input placeholder="请输入证件号" maxLength={18} />
            </FormItem>
          </Col>
        </Row>
        <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
          <Col md={8} sm={24}>
            <FormItem label="生效日期" name="dateArr" {...this.tableSearchLayout}>
              <RangePicker
                mode={['month', 'month']}
                format="YYYY-MM-01"
                onPanelChange={this.onTimeChanges}
              />
            </FormItem>
          </Col>
          <Col md={8} sm={24}>
            <FormItem label="操作时间" name="operTime" {...this.tableSearchLayout}>
              <RangePicker style={{ width: '100%' }} />
            </FormItem>
          </Col>
          {accoOwnerFlag && (
            <Col md={8} sm={24}>
              <FormItem label="账户负责人" name="accoRespId" {...this.tableSearchLayout}>
                <SearchAccoListOs
                  allowClear
                  showSearch
                  filterOption={(input, option) =>
                    option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
                  }
                />
              </FormItem>
            </Col>
          )}
          <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
            <Col md={8} sm={24} />
            <Col md={8} sm={24} />
            <Col md={8} sm={24} offset={!accoOwnerFlag ? 8 : 0}>
              <div style={{ overflow: 'hidden' }}>
                <div style={{ float: 'right', marginBottom: 24 }}>
                  <Button type="primary" onClick={() => this.getList(activeKey)}>
                    查询
                  </Button>
                  <Button style={{ marginLeft: 8 }} onClick={this.resetSearch}>
                    重置
                  </Button>
                  <a style={{ marginLeft: 8 }} onClick={this.toggleForm}>
                    收起
                    <UpOutlined />
                  </a>
                </div>
              </div>
            </Col>
          </Row>
        </Row>
      </Form>
    );
  }

  renderForm() {
    const { expandForm } = this.props;
    return expandForm ? this.renderAdvancedForm() : this.renderSimpleForm();
  }

  render() {
    const { tabList, activeKey, adjustaccubatch } = this.props;
    const { loading, data, detailHdl, proFormFieldsValue } = this.props;
    const {
      selectedRows,
      selectedRowKeys,
      proVisible,
      visHdlRemark,
      decExcelVisible,
      declareData,
    } = this.state;
    const more = (
      <Menu>
        {checkPermissions('os:accuEntryAdj:cancelDecl') && (
          <Menu.Item>
            <a onClick={this.declareCancel}>取消申报</a>
          </Menu.Item>
        )}
        {checkPermissions('os:accuEntryAdj:exportAccuAdj') && (
          <Menu.Item>
            <a onClick={this.outExcel}>申报明细表导出</a>
          </Menu.Item>
        )}
        {checkPermissions('os:accuEntryAdj:impUpdAccuEntAdj') && (
          <Menu.Item>
            <a onClick={this.batchModify}>批量修改</a>
          </Menu.Item>
        )}
        <Menu.Item>
          <a onClick={this.exportData}>导出</a>
        </Menu.Item>
      </Menu>
    );

    const modifyMore = (
      <Menu>
        {checkPermissions('os:accuEntryAdj:impUpdAccuEntAdj') && (
          <Menu.Item>
            <span onClick={this.batchModify}>批量修改</span>
          </Menu.Item>
        )}

        <Menu.Item onClick={this.exportData}>
          <span>导出</span>
        </Menu.Item>
      </Menu>
    );

    const columnsDeal = [
      {
        title: '姓名',
        dataIndex: 'empName',
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
        render: (text, record) =>
          Number(record.probFlag) === 1 ? (
            <Tooltip
              placement="top"
              title={
                <div>
                  <p>
                    问题人员类型：
                    {record.probDets && record.probDets[0] ? record.probDets[0].probTypeName : '--'}
                  </p>
                  <p>
                    问题说明：
                    {record.probDets && record.probDets[0] ? record.probDets[0].probTypeDesc : '--'}
                  </p>
                </div>
              }
            >
              <span>
                {text}
                <img alt="" src={proIcon} />
              </span>
            </Tooltip>
          ) : (
            <span>{text}</span>
          ),
      },
      {
        title: '证件号',
        dataIndex: 'certNo',
        onCell: () => ({
          style: {
            textAlign: 'center',
          },
        }),
        onHeaderCell: () => ({
          style: {
            textAlign: 'center',
            fontWeight: 'bold',
          },
        }),
      },
      {
        title: '客户名称',
        dataIndex: 'custName',
        width: '120px',
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
      },
      {
        title: '执行地',
        dataIndex: 'areaName',
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
      },
      {
        title: '调整范围',
        dataIndex: 'adjTypeName',
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
        render: text => (
          <Popover content={text}>
            <div
              style={{
                width: '100px',
                overflow: 'hidden',
                textOverflow: 'ellipsis',
                whiteSpace: 'nowrap',
                cursor: 'pointer',
              }}
            >
              <span>{text}</span>
            </div>
          </Popover>
        ),
      },

      {
        title: '生效日期',
        dataIndex: 'validDate',
        width: '160px',
        onHeaderCell: () => ({ style: { fontWeight: 'bold', textAlign: 'center' } }),
        onCell: () => ({
          style: {
            textAlign: 'center',
          },
        }),
        render: text => (text && `${`${text}`.substr(0, 4)}-${`${text}`.substr(4)}-01`) || '--',
      },
      {
        title: '所属客服',
        dataIndex: 'creName',
        onHeaderCell: () => ({ style: { fontWeight: 'bold', textAlign: 'center' } }),
      },
      {
        title: '操作时间',
        dataIndex: 'operTime',
        onCell: () => ({
          style: {
            textAlign: 'center',
          },
        }),
        onHeaderCell: () => ({
          style: {
            textAlign: 'center',
            fontWeight: 'bold',
          },
        }),
        render: text => (text ? moment(text).format('YYYY-MM-DD HH:mm') : '--'),
      },
      {
        title: '操作',
        onHeaderCell: () => ({ style: { fontWeight: 'bold', textAlign: 'center', width: 150 } }),

        width: '140px',
        onCell: () => ({
          style: {
            textAlign: 'center',
          },
        }),
        render: (text, record) => (
          <Fragment>
            <span>
              <Link
                to={`/providentfundmanagement/accuadjust/detail?execAdjId=${
                  record.execAdjId
                }&activeKey=${activeKey}`}
              >
                查看
              </Link>
              <Divider type="vertical" />
              <a
                onClick={() =>
                  this.hdlRemark(record.execAdjId, record.sendId, record.adjId, record.accuEmpOrdId)
                }
              >
                办理备注
              </a>
            </span>
          </Fragment>
        ),
      },
    ];
    const columns = [
      {
        title: '姓名',
        dataIndex: 'empName',
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
        render: (text, record) =>
          Number(record.probFlag) === 1 ? (
            <Tooltip
              placement="top"
              title={
                <div>
                  <p>
                    问题人员类型：
                    {record.probDets && record.probDets[0] ? record.probDets[0].probTypeName : '--'}
                  </p>
                  <p>
                    问题说明：
                    {record.probDets && record.probDets[0] ? record.probDets[0].probTypeDesc : '--'}
                  </p>
                </div>
              }
            >
              <span>
                {text}
                <img alt="" src={proIcon} />
              </span>
            </Tooltip>
          ) : (
            <span>{text}</span>
          ),
      },
      {
        title: '证件号',
        dataIndex: 'certNo',
        onCell: () => ({
          style: {
            textAlign: 'center',
          },
        }),
        onHeaderCell: () => ({
          style: {
            textAlign: 'center',
            fontWeight: 'bold',
          },
        }),
      },
      {
        title: '客户名称',
        dataIndex: 'custName',
        width: '120px',
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
      },
      {
        title: '执行地',
        dataIndex: 'areaName',
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
      },
      {
        title: '调整范围',
        dataIndex: 'adjTypeName',
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
        render: text => (
          <Popover content={text}>
            <div
              style={{
                width: '100px',
                overflow: 'hidden',
                textOverflow: 'ellipsis',
                whiteSpace: 'nowrap',
                cursor: 'pointer',
              }}
            >
              <span>{text}</span>
            </div>
          </Popover>
        ),
      },

      {
        title: '生效日期',
        dataIndex: 'validDate',
        width: '160px',
        onHeaderCell: () => ({ style: { fontWeight: 'bold', textAlign: 'center' } }),
        onCell: () => ({
          style: {
            textAlign: 'center',
          },
        }),
        render: text => (text && `${`${text}`.substr(0, 4)}-${`${text}`.substr(4)}-01`) || '--',
      },
      {
        title: '所属客服',
        onHeaderCell: () => ({ style: { fontWeight: 'bold', textAlign: 'center' } }),
        dataIndex: 'creName',
      },
      {
        title: '操作时间',
        onCell: () => ({
          style: {
            textAlign: 'center',
          },
        }),
        onHeaderCell: () => ({
          style: {
            textAlign: 'center',
            fontWeight: 'bold',
          },
        }),
        dataIndex: 'operTime',
        render: text => (text ? moment(text).format('YYYY-MM-DD HH:mm') : '--'),
      },
      {
        title: '操作',
        onHeaderCell: () => ({ style: { fontWeight: 'bold', textAlign: 'center', width: 150 } }),

        width: '140px',
        onCell: () => ({
          style: {
            textAlign: 'center',
          },
        }),
        render: (text, record) => (
          <Fragment>
            <span>
              <Link
                to={`/providentfundmanagement/accuadjust/detail?execAdjId=${
                  record.execAdjId
                }&activeKey=${activeKey}`}
              >
                查看
              </Link>
              <Divider type="vertical" />
              <a
                onClick={() =>
                  this.hdlRemark(record.execAdjId, record.sendId, record.adjId, record.accuEmpOrdId)
                }
              >
                办理备注
              </a>
            </span>
          </Fragment>
        ),
      },
    ];
    const columnsCancel = [
      {
        title: '姓名',
        dataIndex: 'empName',
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
        render: (text, record) =>
          Number(record.probFlag) === 1 ? (
            <Tooltip
              placement="top"
              title={
                <div>
                  <p>
                    问题人员类型：
                    {record.probDets && record.probDets[0] ? record.probDets[0].probTypeName : '--'}
                  </p>
                  <p>
                    问题说明：
                    {record.probDets && record.probDets[0] ? record.probDets[0].probTypeDesc : '--'}
                  </p>
                </div>
              }
            >
              <span>
                {text}
                <img alt="" src={proIcon} />
              </span>
            </Tooltip>
          ) : (
            <span>{text}</span>
          ),
      },
      {
        title: '证件号',
        dataIndex: 'certNo',
        onCell: () => ({
          style: {
            textAlign: 'center',
          },
        }),
        onHeaderCell: () => ({
          style: {
            textAlign: 'center',
            fontWeight: 'bold',
          },
        }),
      },
      {
        title: '客户名称',
        dataIndex: 'custName',
        width: '120px',
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
      },
      {
        title: '执行地',
        dataIndex: 'areaName',
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
      },
      {
        title: '调整范围',
        dataIndex: 'adjTypeName',

        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
        render: text => (
          <Popover content={text}>
            <div
              style={{
                width: '100px',
                overflow: 'hidden',
                textOverflow: 'ellipsis',
                whiteSpace: 'nowrap',
                cursor: 'pointer',
              }}
            >
              <span>{text}</span>
            </div>
          </Popover>
        ),
      },

      {
        title: '生效日期',
        dataIndex: 'validDate',
        width: '160px',
        onHeaderCell: () => ({ style: { fontWeight: 'bold', textAlign: 'center' } }),
        onCell: () => ({
          style: {
            textAlign: 'center',
          },
        }),
        render: text => (text && `${`${text}`.substr(0, 4)}-${`${text}`.substr(4)}-01`) || '--',
      },
      {
        title: '所属客服',
        dataIndex: 'creName',
        onHeaderCell: () => ({ style: { fontWeight: 'bold', textAlign: 'center' } }),
      },
      {
        title: '操作时间',
        dataIndex: 'operTime',
        onCell: () => ({
          style: {
            textAlign: 'center',
          },
        }),
        onHeaderCell: () => ({
          style: {
            textAlign: 'center',
            fontWeight: 'bold',
          },
        }),
        render: text => (text ? moment(text).format('YYYY-MM-DD HH:mm') : '--'),
      },
      {
        title: '操作',
        onHeaderCell: () => ({ style: { fontWeight: 'bold', textAlign: 'center', width: 150 } }),

        width: '140px',
        onCell: () => ({
          style: {
            textAlign: 'center',
          },
        }),
        render: (text, record) => (
          <Fragment>
            <span>
              <Link
                to={`/providentfundmanagement/accuadjust/detail?execAdjId=${
                  record.execAdjId
                }&activeKey=${activeKey}`}
              >
                查看
              </Link>
            </span>
          </Fragment>
        ),
      },
    ];
    const hdlMenu = (
      <Menu>
        {checkPermissions('os:accuEntryAdj:accuEntryAdjImport') && (
          <Menu.Item>
            <a onClick={this.hdlExport}>申报结果导入</a>
          </Menu.Item>
        )}
        {checkPermissions('os:accuEntryAdj:completeDecl') && (
          <Menu.Item>
            <a onClick={this.declareSuccess}>标记申报成功</a>
          </Menu.Item>
        )}
      </Menu>
    );
    const tabPane1 = (
      <div>
        <Row style={{ marginBottom: 20 }}>
          <Col>
            <Authorized authority="os:accuEntryAdj:underLineDecl" noMatch={null}>
              <Button type="primary" className={styles.listBtn} onClick={this.offDeclare}>
                线下申报
              </Button>
            </Authorized>
            <Authorized authority="os:accuAdjProb:addProb" noMatch={null}>
              <Button className={styles.listBtn} onClick={() => this.showModal(true)}>
                标记问题人员
              </Button>
            </Authorized>
            <Dropdown overlay={modifyMore}>
              <Button>
                更多 <DownOutlined />
              </Button>
            </Dropdown>
          </Col>
        </Row>
        <StandardTable
          selectedRows={selectedRows}
          selectedRowKeys={selectedRowKeys}
          loading={loading}
          data={data}
          rowKey="execAdjId"
          columns={columns}
          onSelectRow={this.handleSelectRows}
          onChange={this.handleStandardTableChange}
        />
      </div>
    );
    const tabPane2 = (
      <div>
        <Row style={{ marginBottom: 20 }}>
          <Col>
            <Dropdown overlay={hdlMenu} className={styles.listBtn}>
              <Button type="primary">申报完成</Button>
            </Dropdown>
            <Authorized authority="os:accuAdjProb:addProb" noMatch={null}>
              <Button className={styles.listBtn} onClick={() => this.showModal(true)}>
                标记问题人员
              </Button>
            </Authorized>
            <Dropdown overlay={more}>
              <Button>
                更多 <DownOutlined />
              </Button>
            </Dropdown>
          </Col>
        </Row>
        <StandardTable
          selectedRows={selectedRows}
          selectedRowKeys={selectedRowKeys}
          loading={loading}
          data={data}
          rowKey="execAdjId"
          columns={columnsDeal}
          onSelectRow={this.handleSelectRows}
          onChange={this.handleStandardTableChange}
        />
      </div>
    );
    const tabPane3 = (
      <div>
        <Row style={{ marginBottom: 16 }}>
          <Authorized authority="">
            <Button
              type="primary"
              style={{ marginRight: 8 }}
              onClick={this.exportData}
              icon={<DownloadOutlined />}
            >
              导出
            </Button>
          </Authorized>
        </Row>
        <StandardTable
          selectedRows={selectedRows}
          selectedRowKeys={selectedRowKeys}
          loading={loading}
          data={data}
          rowKey="execAdjId"
          columns={columnsDeal}
          onSelectRow={this.handleSelectRows}
          onChange={this.handleStandardTableChange}
        />
      </div>
    );
    const tabPane4 = (
      <div>
        <div>
          <Row style={{ marginBottom: 16 }}>
            <Authorized authority="os:accuAdjProb:addProbFdbk" noMatch={null}>
              <Button type="primary" onClick={this.batchFeedback} style={{ marginRight: 8 }}>
                批量反馈
              </Button>
            </Authorized>
            {/* <Authorized authority="os:accuAddDet:exportAccuAdd" noMatch={null}> */}
            <ProExportBtn selectedRowKeys={selectedRowKeys} downloadParams={proFormFieldsValue} />
            {/* </Authorized> */}
          </Row>
        </div>
        <ProTable
          onRef={e => {
            this.setState({ proTable: e });
          }}
          selectedRows={selectedRows}
          selectedRowKeys={selectedRowKeys}
          onSelectRow={this.handleSelectRows}
          proUrl="/providentfundmanagement/accuadjust/problem"
          busiType="4"
        />
      </div>
    );
    const tabPane5 = (
      <div>
        <StandardTable
          selectedRows={selectedRows}
          selectedRowKeys={selectedRowKeys}
          loading={loading}
          data={data}
          rowKey="execAdjId"
          columns={columnsCancel}
          onSelectRow={this.handleSelectRows}
          onChange={this.handleStandardTableChange}
        />
      </div>
    );
    const tabPaneTem = ['', tabPane1, tabPane2, tabPane3, tabPane5, tabPane4];

    return (
      <PageHeaderWrapper>
        <Card className={styles.searchCard}>
          <div className={styles.tableListForm}>{this.renderForm()}</div>
        </Card>
        <Card className={styles.tabCard}>
          <div className={styles.tableList}>
            <Tabs activeKey={activeKey} onChange={this.changeTabPane}>
              {tabList.map(pane => (
                <TabPane tab={pane.itemName} key={pane.itemCode}>
                  {tabPaneTem[pane.itemCode]}
                </TabPane>
              ))}
            </Tabs>

            <ServiceRemark
              visHdlRemark={visHdlRemark}
              handleModalVisible={this.handleModalVisible}
              submitData={this.submitData}
              detailHdl={detailHdl}
            />
          </div>
        </Card>
        {proVisible && (
          <ProModal
            selectedRows={selectedRows}
            selectedRowKeys={selectedRowKeys}
            busiType="4"
            onOk={this.proHandleOk}
            onCancel={() => this.toggleProModal(false)}
            isProType
            // isAlertObj
          />
        )}
        <DeclareModal
          visible={decExcelVisible}
          dataSource={declareData}
          onCancel={this.onDeclareCancel}
          onOk={this.onDeclareCancel}
        />
        <BatchTaskProgress
          progressVisible={adjustaccubatch.showProgress}
          progressPercent={adjustaccubatch.progressPercent || 0}
          isShowResult={adjustaccubatch.progressPercent === 100}
          resultInfo={adjustaccubatch.resultInfo}
          handleProgressModalVisible={this.handleProgressModalVisible}
          maskClosable={false}
        />
      </PageHeaderWrapper>
    );
  }
}

export default TableList;
